<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
	<h:head>
		<h:outputScript name="locales/locale-nl.js" library="primefaces" />
	</h:head>

	<h:body>

		<h:form id="form">
			<p:messages id="msgs" showDetail="true" />

			<p:colorPicker id="openclose" value="#{colorPicker001.openclose}"
				clearButton="true" closeButton="true" alpha="false">
				<p:ajax event="open" listener="#{colorPicker001.onPopupOpened}" update="msgs" />
				<p:ajax event="close" listener="#{colorPicker001.onPopupClosed}"	update="@form" />
			</p:colorPicker>

            <p:colorPicker id="ajax" value="#{colorPicker001.ajax}"
                clearButton="true" closeButton="true" alpha="false" formatToggle="true">
                <p:ajax event="change" listener="#{colorPicker001.onColorChange}" update="msgs" />
            </p:colorPicker>
		</h:form>

	</h:body>
</f:view>

</html>